<template>
    <div class="page">
        <div class="header">
            <div class="name">
                楼名称
            </div>
            <div class="floors">
                层数
            </div>
            <div class="units">
                单元数
            </div>
            <div class="households">
                户数
            </div>
<!--            <div class="persons">-->
<!--                人数-->
<!--            </div>-->
            <div class="operate">
                操作
            </div>
        </div>
        <div class="main">
            <div class="item" v-for="(item, index) in datas" :key="index">
                <div class="name" :title="item.buildingName">
                    {{ item.buildingName }}
                </div>
                <div class="floors">
                    {{ item.floors }}
                </div>
                <div class="units">
                    {{ item.units }}
                </div>
                <div class="households">
                    {{ item.households }}
                </div>
<!--                <div class="persons">-->
<!--                    {{ item.population }}-->
<!--                </div>-->
                <div class="operate" @click="viewMore(item)">
                    查看
                </div>
            </div>
            <zlc-nodata v-if="!datas || !datas.length"></zlc-nodata>
        </div>
        <zlc-building-popup ref="buildingPopupCom"></zlc-building-popup>

    </div>
</template>

<script>
import { baseBuildings } from "/src/api/api.js"
import {onMounted, ref} from "vue";
import zlcBuildingPopup from "/src/components/zlcBuildingPopup/zlcBuildingPopup.vue";
import zlcNodata from "../../../components/zlcNodata/zlcNodata.vue";
export default {
    name: "patrolCount",
    components: {
        zlcNodata,
        zlcBuildingPopup
    },
    setup(props, ctx){
        let datas = ref([])

        let buildingPopupCom = ref(null)
        let addBuilding = () => {
            baseBuildings({ baseId: window.baseId, pageNo: 1, pageSize: 1000 }).then(res => {
                datas.value = res.result.records
                let positions = res.result.records.map(item => {
                    if(item.longitudeLatitude){
                        let longitude = item.longitudeLatitude.split(',')[0]
                        let latitude = item.longitudeLatitude.split(',')[1]
                        let z = item.longitudeLatitude.split(',')[2]
                        let name = item.buildingName
                        return Object.assign(item, { longitude, latitude, z, name })
                    }
                })
                ctx.emit('addBuildings', positions)
            })
        }

        let viewMore = (item) => {
            buildingPopupCom.value.showModel(item.id, item.buildingName)
        }

        onMounted(() => {
            addBuilding()
        })

        return {
            datas,
            buildingPopupCom,
            addBuilding,
            viewMore
        }
    }
}
</script>

<style scoped lang="less">
.page {
    width: 100%;
    height: 100%;
    color: #fff;
    padding-top: 10px;
    box-sizing: border-box;
    .header{
        background: url("/src/assets/titlebcg.png") center center no-repeat;
        background-size: 100% 100%;
    }

    .header, .main .item{
        width: 100%;
        height: 40px;
        line-height: 40px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .name{
            width: 27%;
            text-align: center;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .floors, .units, .households, .persons, .operate{
            width: calc(73% / 5);
            text-align: center;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
    .main{
        width: 100%;
        height: calc(100% - 40px);
        overflow-y: auto;
        background: rgba(0, 0, 0, 0.05);
        /* 滚动条优化 start */
        &::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        /* 无内容时的滚动条样式 */
        &::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 5px rgb(64, 128, 230);
            border-radius: 4px;
            background: rgba(117, 207, 239, 0.1);
        }

        /* 有内容时的滚动条样式 */
        &::-webkit-scrollbar-thumb {
            background: rgb(9, 108, 222);
            border-radius: 4px;
        }

        &::-webkit-scrollbar-thumb:hover {
            background: rgba(72, 136, 234, 0.8);
        }

        &::-webkit-scrollbar-corner {
            background: rgba(0, 0, 0, 0.1);
        }

        /* 滚动条优化 end */
        .item{
            width: 100%;
            height: 50px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #4579c7;
            .operate{
                cursor: pointer;
            }
        }
    }
}
</style>
